<script setup>

import My from './my.vue'
import Nav from '../Layout/nav.vue'
import Star from './star.vue'
import { inject } from 'vue'
import {ref} from 'vue'

//测试 axios 是否能够成功连接后端接口
const axios = inject('$axios')
const data = ref("")
const getData = async () => {
  const response = await axios.get('/vue')
  data.value = response.data.data
  console.log(response);  
}

</script>

<template>
<div class="container">
  <div class = "articleList">
    <My/>
  </div>
  <div class="nav">
    <Nav/>
  </div>
  <div class = "top">
    <h1>我的文章</h1>
  </div>
  <div class="rightLine">
    <Star/>
  </div>
</div>
</template>

<style scoped>


/* 顶部显示 */
.top {
  border-radius: 5px;
  position: absolute;
  left: 20px;
  width: 885px;
  top: 50px;
  height: 30px;
  padding: 15px;
  /* background-color: #f1ef70; */
  
  /* 新增代码：实现水平和垂直居中 */
  display: flex;       /* 使用flex布局 */
  justify-content: center;  /* 水平居中 */
  align-items: center;      /* 垂直居中 */
  
  /* 可选：如果不需要绝对定位，可改为更简单的布局 */
  /* position: relative; */
  /* margin: 0 auto; */
}
/* 文章列表 */
.articleList{
  border-radius: 5px;
  position: absolute;
  left: 10px;
  top:120px;
  width: 935px;
  margin: 0 auto;
  background-color: #c7b5b5;

}
/* 右侧扩展栏 */
.rightLine{
  border-radius: 5px;
  position: absolute;
  left: 970px;
  top:50px;
  right: 10px;
  margin: 0 auto;
  background-color: #c7b5b5;
  /* background-color: rgb(221, 250, 221); */
}
</style>